<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/static/css/oksub.css">
	<script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
    <style type="text/css">
        .layui-table-tool-self {
            display: none;
        }
    </style>
</head>
<body>
<div class="ok-body">
	<!--模糊搜索区域-->
    <blockquote class="layui-elem-quote" style="margin: 5px 0;">当前位置：系统管理>后台设置>菜单管理</blockquote>
	<div class="layui-row">
		<form class="layui-form ok-search-form">
			<div class="layui-form-item">
                <div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" style="width: 340px;" class="layui-input" placeholder="被审/委托/合作单位名称" autocomplete="off" id="searchname" name="searchname">
					</div>
				</div>
				<button class="layui-btn" style="margin-left: 150px;margin-bottom: 10px;" lay-submit="" lay-filter="search">
                            <i class="layui-icon">&#xe615;</i>
                        </button>
			</div>
		</form>
	</div>
	<!--数据表格-->
	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="/static/lib/layui/layui.js"></script>
<script>
	layui.use(["element", "jquery", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
		let table = layui.table;
		let form = layui.form;
		let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let okMock = layui.okMock;
		let $ = layui.jquery;

		okLoading.close($);

		laydate.render({elem: "#startTime", type: "datetime"});
		laydate.render({elem: "#endTime", type: "datetime"});

		let userTable = table.render({
			elem: '#tableId',
			url: '/business/customers_list/',
			limit: 20,
            height:'full-140',
			page: true,
			toolbar: "#toolbarTpl",
			size: "sm",
			cols: [[
				{type: "checkbox", fixed: "left"},
				{field: "id", title: "ID", width: 60, sort: true},
				{field: "cus_code", title: "被审单位代码", width: 150},
				{field: "cus_audited_object", title: "被审单位名称", width: 200},
                {field: "cus_phone", title: "联系电话", width: 200},
                {field: "cus_marital", title: "委托模式", width: 200},
                {field: "cus_entrust_code", title: "委托单位代码", width: 200},
                {field: "cus_entrust_name", title: "委托单位名称", width: 200},
                {field: "cus_cooperation_code", title: "合作单位代码", width: 200},
                {field: "cus_cooperation_name", title: "合作单位名称", width: 200},
                {field: "cus_create_person", title:"创建人",hide:true},
                {field: "cus_address", title: "地址", width: 220},
				{field: "remark_describe", title: "备注", width: 250},
				{field: "create_time", title: "创建时间", width: 200},
                {field: "now_status", title: "状态", width: 100, templet: "#statusTpl", fixed: "right"},
				{title: "操作", align: "center",width:150, fixed: "right", templet: "#operationTpl"}
			]],
			done: function (res, curr, count) {

			}
		});
        // 这个地方说了个寂寞
		form.on("submit(search)", function (data) {
			userTable.reload({
				url: "{% url 'business:customers_search' %}",
				request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'limit' //每页数据量的参数名，默认：limit
                },
				page: {curr: 1},
                where:{
                    "searchname":$('#searchname').val()
                }
			});
			return false;
		});

		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "batchDel":
					batchDel();
					break;
				case "add":
					add();
					break;
			}
		});

		table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "edit":
					edit(data);
					break;
				case "apply":
					apply(data);
					break;
			}
		});

		function add() {
			okLayer.open("添加客户", "{% url 'business:customers_insert_view' %}", "90%", "90%", null, function () {
				userTable.reload();
			})
		}

		function edit(data) {
			okLayer.open("更新客户信息", "{% url 'business:customers_edit_view' %}", "90%", "90%", function (layero, index) {
				let iframe = window['layui-layer-iframe' + index];
                iframe.child(data);
			})
		}

		function apply(data) {
			okLayer.open("申请更新客户信息", "{% url 'business:customers_apply_view' %}", "90%", "90%", function (layero, index) {
				let iframe = window['layui-layer-iframe' + index];
                iframe.child(data);
			})
		}
	})
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
        {% for lao in data %}
            {% if lao.menu_code == '100101' %}
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe608;</i>添加客户</button>
            {% endif %}
        {% endfor %}
	</div>
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
    {% for kk in data %}
            {% if kk.menu_code == '100102' %}
                {% verbatim %}
	            {{#  if(d.cus_create_person !=null){ }}
                    <button class="layui-btn layui-btn-xs layui-btn" lay-event="edit">修改</button>
                {{#  } else{ }}
                    <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="apply">申请修改</button>
                {{#  } }}
	            {% endverbatim %}
            {% endif %}
    {% endfor %}
</script>

<script type="text/html" id="statusTpl">
    {% verbatim %}
	{{#  if(d.now_status == 0){ }}
	<span class="layui-btn layui-btn-xs">合作存续</span>
	{{#  } else if(d.now_status == 1) { }}
	<span class="layui-btn layui-btn-danger layui-btn-xs">终止合作</span>
	{{#  } }}
	{% endverbatim %}
</script>

</body>
</html>
